<?php 
	//error_reporting(E_ALL);
 	//ini_set("display_errors", 1);
 	
	include_once './templates/display.php';
	include_once './templates/modules.php';
	
	Displayer::displayHeader('Shop');
?>
<div class="col">
			<h1> AJOUT DE PRODIUIT </h1><br/>
			<form name="inscription" id="inscription" method="post" action="classes/form-add-product.php" enctype="multipart/form-data">
			
				<label class="labelLeft">Cat&#233;gorie du produit : </label><br/>
                <select name="cat" class="champ champSecond">
    				<option value="1">Alimentation</option>
  					<option value="2">Boulangerie</option>
 					<option value="3">Boucherie</option>
					<option value="4">Primeur</option>
    			</select>
				<br/><br/>
				
				<label id="errorNomProduct" name="errorNomProduct" class="tooltipError"></label><br/>
				<input id="nom" name="nom" type="text" class="champ" placeholder="Nom du produit"/>
				<img class="imgError" id="imgNomState" name ="imgNomState" src="Images/Icons/ok.png">
				<br/>
				
				<label id="errorPrix" name="errorPrix" class="tooltipError"></label><br/>
				<input id="prixU" name="prixU" type="text" maxLength="11" class="champ" placeholder="Prix unitaire"/>
				<img class="imgError" id="imgPrixState" name ="imgPrixState" src="Images/Icons/ok.png">
				<br/>
				
				<label id="errorQte" name="errorQte" class="tooltipError"></label><br/>
				<input id="qte" name="qte" type="number" min="1" max="999999999" class="champ" placeholder="Quantit&#233; disponible en stock"/>
				<img class="imgError" id="imgQteState" name ="imgQteState" src="Images/Icons/ok.png">
				<br/><br/>
								
				<label class="labelLeft">Image  du produit : </label><br/>
				<input class="champ champSecond" type="file" name="imgProduit" id="imgProduit" />
				<br/><br/>
								
				<button class="EButton" type="submit">Ajouter</button>
				<!--<input type="reset" value="Réinitialiser le formulaire" />-->
			</form>
		</div>
		<script>
		(function() { // On utilise une IEF pour ne pas polluer l'espace global
     
			// Fonction de désactivation de l'affichage des messages et des icones.
			
			function desactivateError() {
			
				var label = document.getElementsByTagName('label'),
				labelLength = label.length;
				
				for (var i = 0 ; i < labelLength ; i++) {
					if (label[i].className == 'tooltipError') {
						label[i].style.display = 'none';
					}
				}
				
				var img = document.getElementsByTagName('img'),
				imgLength = img.length;
				
				for (var i = 0 ; i < imgLength ; i++) {
					if (img[i].className == 'imgError') {
						img[i].style.display = 'none';
					}
				}
			
			}

			// Fonctions de vérification du formulaire, elles renvoient « true » si tout est OK
			
			var check = {}; // On met toutes nos fonctions dans un objet littéral
				
			check['prixU'] = function() {
				var prixU = document.getElementById('prixU');
				var errorPrix = document.getElementById('errorPrix');
				var imgPrix = document.getElementById('imgPrixState');
				
				if (prixU.value.length > 0 && prixU.value.length <= 11 && !isNaN(parseFloat(prixU.value))) {
					imgPrix.src  = 'Images/Icons/ok.png';
					imgPrix.style.display = 'inline-block';
					errorPrix.innerHTML  = '';
					errorPrix.style.display = 'none';
					return true;
				} else {	
					imgPrix.src  = 'Images/Icons/ko.png';	
					imgPrix.style.display = 'inline-block';
					errorPrix.innerHTML  = 'Le prix ne doit pas d&#233;passer 10 chiffres et ne doit pas comporter des caract&#232;res alphab&#233;tiques ou sp&#233;ciaux';
					errorPrix.style.display = 'inline-block';					
					return false;
				}
			};
			
			check['nom'] = function() {
				var nomP = document.getElementById('nom');
				var errorNom = document.getElementById('errorNomProduct');
				var imgNom = document.getElementById('imgNomState');
				
				if (nomP.value.length > 0 && nomP.value.length <= 50) {
					imgNom.src  = 'Images/Icons/ok.png';
					imgNom.style.display = 'inline-block';
					errorNom.innerHTML  = '';
					errorNom.style.display = 'none';
					return true;
				} else {	
					imgNom.src  = 'Images/Icons/ko.png';	
					imgNom.style.display = 'inline-block';
					errorNom.innerHTML  = 'Le nom du produit est obligatoire et ne doit pas d&#233;passer 50 caract&#232;res';
					errorNom.style.display = 'inline-block';					
					return false;
				}
			
			};
			check['qte'] = function() {
				var qte = document.getElementById('qte');
				var errorQte = document.getElementById('errorQte');
				var imgQte = document.getElementById('imgQteState');
				
				if (qte.value.length > 0 && qte.value.length <= 11 && !isNaN(parseInt(qte.value))) {
					imgQte.src  = 'Images/Icons/ok.png';
					imgQte.style.display = 'inline-block';
					errorQte.innerHTML  = '';
					errorQte.style.display = 'none';
					return true;
				} else {	
					imgQte.src  = 'Images/Icons/ko.png';	
					imgQte.style.display = 'inline-block';
					errorQte.innerHTML  = 'La quantit&#233; doit &#234;tre un nombre et ne peut d&#233;passer 11 chiffres.';
					errorQte.style.display = 'inline-block';					
					return false;
				}
			
			};			   
			
			// Mise en place des événements
			
			(function() { // Utilisation d'une fonction anonyme pour éviter les variables globales.
			
				var myForm = document.getElementById('inscription'),
					inputs = document.getElementsByTagName('input'),
					inputsLength = inputs.length;
			
				for (var i = 0 ; i < inputsLength ; i++) {
					if (inputs[i].type == 'text' || inputs[i].type == 'password' || inputs[i].type == 'number') {
			
						inputs[i].onkeyup = function() {
							check[this.id](this.id); // « this » représente l'input actuellement modifié
						};
			
					}
				}
			
				myForm.onsubmit = function() {
			
					var result = true;
			
					for (var i in check) {
						result = check[i](i) && result;
					}			
					return result;
			
				};
					
			})();
			desactivateError();
		})();
	</script>
<?php
	Displayer::displayFooter();
?>